var api = require('../../utils/api.js');


Page({

    data: {
        tops:32,
        tempFilePath: '',
        hideModal: false,
        hasDraw: false,
        canvasName: '#writeCanvas',
        ctx: '',
        canvasWidth: 0,
        canvasHeight: 0,
        startPoint: {
            x: 0,
            y: 0,
        },
        selectColor: 'black',
        lineColor: '#1A1A1A', // 颜色
        lineSize: 1, // 笔记倍数
        radius: 1, //画圆的半径
        id:'',
        types:''
    },

      /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        var that=this;

        var infos = wx.getSystemInfoSync();
        console.log(infos);
        console.log(infos.statusBarHeight);

        this.setData({
            tops: infos.statusBarHeight + 4,
            id:options.id,
            types:options.types,
        })

    },

     // 初始化画布
     onShow() {
        this.setData({
            hideModal: false
        })
        let that = this
        let query = wx.createSelectorQuery().in(this);
        //获取自定义组件的SelectQuery对象
        this.canvasCtx = wx.createCanvasContext('signature', that)
        // 设置线的样式
        this.canvasCtx.setLineCap("round");
        this.canvasCtx.setLineJoin("round");
        // 初始化颜色
        this.canvasCtx.setStrokeStyle(that.data.selectColor);
        // 初始化粗细
        query.select('.modal-canvas').boundingClientRect(rect => {
            this.setData({
                canvasWidth: rect.width,
                canvasHeight: rect.height,
            });
        }).exec();
    },

    scaleStart(event) {
        if (event.type != 'touchstart') return false;
        let currentPoint = {
            x: event.touches[0].x,
            y: event.touches[0].y
        }
        // this.data.ctx.moveTo(currentPoint.x, currentPoint.y)
        this.drawCircle(currentPoint);
        this.setData({
            startPoint: currentPoint,
            hasDraw: true, //签字了
        });
    },
    mouseDown() {},
    scaleEnd(e) {
        this.setData({
            isStart: true
        })
    },
    scaleMove(event) {
        if (event.type != "touchmove") return false;
        let {
            startPoint
        } = this.data
        let currentPoint = {
            x: event.touches[0].x,
            y: event.touches[0].y
        }

        this.drawLine(startPoint, currentPoint)
        this.setData({
            startPoint: currentPoint
        })
    },
    drawCircle(point) { //这里负责点
        let ctx = this.canvasCtx;
        ctx.beginPath();
        ctx.setFillStyle(this.data.lineColor)
        //笔迹粗细由圆的大小决定
        ctx.arc(point.x, point.y, this.data.radius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.closePath();
        ctx.draw(true)
    },
    drawLine(sourcePoint, targetPoint) {
        let ctx = this.canvasCtx;
        this.drawCircle(targetPoint);
        ctx.beginPath();
        ctx.setStrokeStyle(this.data.lineColor)
        ctx.setLineWidth(this.data.radius * 2)
        ctx.moveTo(sourcePoint.x, sourcePoint.y);
        ctx.lineTo(targetPoint.x, targetPoint.y);
        ctx.stroke();
        ctx.closePath();
    },
    clearCanvas() {
        //清空画布
        let ctx = this.canvasCtx;
        ctx.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight);
        ctx.fillStyle = 'rgba(0, 0, 0, .1)';
        ctx.draw()
        this.setData({
            hasDraw: false //未签字
        })
    },
    save() {
        let {
            hasDraw,
        } = this.data
        if (!hasDraw) {
            wx.showToast({
                title: '您还未签名！',
                icon: 'none',
                mask: true
            })
            return
        } else {
            this.saveToImage();
        }
    },
    saveToImage() {
        let that = this;
        let {
            canvasHeight,
            canvasWidth
        } = that.data;
        wx.canvasToTempFilePath({
            x: 0,
            y: 0,
            width: canvasWidth,
            height: canvasHeight,
            canvasId: 'signature',
            success(res) {
                console.log(res)
                
                that.uploadfile(res.tempFilePath);
            },
            fail(err) {
                console.log(err);
            }
        }, that)
    },

    uploadfile(file){

        let that = this;
        var usrl=api.HOST;
        var id=this.data.id;
        var types=this.data.types;


        wx.uploadFile({
            filePath: file,
            name: 'file',
            url: usrl+'/api/live/signname&types='+types+'&id='+id,
            formData:{},
            success:function(res){
              var data= JSON.parse(res.data);
              wx.showToast({
                title: data.msg,
                icon:'none'
              })

              if(data.code==1){
                  wx.navigateBack();

              }
      
            },
            fail: function (res) {
              console.log('上传失败');
              }
          })


    },

    goindex(){
        wx.navigateBack();
    }


})



